<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础功能</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-switch v-model="value1" @change="change"></uv-switch>
            </view>
            <view class="uv-page__tag-item">
               <uv-switch v-model="value2"></uv-switch>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">加载中</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-switch v-model="value3" loading></uv-switch>
            </view>
            <view class="uv-page__tag-item">
               <uv-switch v-model="value4" loading></uv-switch>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">禁用状态</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-switch v-model="value5" disabled></uv-switch>
            </view>
            <view class="uv-page__tag-item">
               <uv-switch v-model="value6" disabled></uv-switch>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义尺寸</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-switch v-model="value7" size="28"></uv-switch>
            </view>
            <view class="uv-page__tag-item">
               <uv-switch v-model="value8" size="20"></uv-switch>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义颜色</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-switch v-model="value9" activeColor="#f56c6c" loading></uv-switch>
            </view>
            <view class="uv-page__tag-item">
               <uv-switch v-model="value10" activeColor="#5ac725" loading></uv-switch>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义样式</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-switch
                  :space="2"
                  v-model="value11"
                  activeColor="#f56c6c"
                  inactiveColor="rgb(230, 230, 230)"
               ></uv-switch>
            </view>
            <view class="uv-page__tag-item">
               <uv-switch
                  space="2"
                  v-model="value12"
                  activeColor="#f9ae3d"
                  inactiveColor="rgb(230, 230, 230)"
               ></uv-switch>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">异步控制</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-switch v-model="value13" asyncChange @change="asyncChange"></uv-switch>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(true);
const value3 = ref(false);
const value4 = ref(true);
const value5 = ref(false);
const value6 = ref(true);
const value7 = ref(false);
const value8 = ref(true);
const value9 = ref(true);
const value10 = ref(true);
const value11 = ref(false);
const value12 = ref(true);
const value13 = ref(true);

const change = (e: boolean) => {
   console.log(e);
};
const asyncChange = (e: boolean) => {
   uni.showModal({
      content: e ? '确定要打开吗' : '确定要关闭吗',
      success: res => {
         if (res.confirm) {
            value13.value = e;
         }
      },
   });
};
</script>

<style lang="scss" scoped>
.uv-page {
   &__tag-item {
      margin-right: 30px;
   }
}

.uv-demo-block__content {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
}
</style>
